<template>
    <div class="managerKeys">
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flexItem"  v-if="item.show">
                <div class="button" @click="sendCommand(item)">{{item.name}}</div>
            </div>
        </div>
        <van-popup v-model="show" ><van-loading color="#1989fa" /></van-popup>
    </div>
</template>

<script>
    import {TenonWebsocket} from "../../js/websocket";
    import { Dialog,Toast,Loading,Popup  } from 'vant';

    export default {
        name: 'ManagerKeys',
        components: {
            vanLoading: Loading,
            vanPopup: Popup
        },
        data () {
            return {
                gatewayId : this.$route.query.gatewayId,
                devId : this.$route.query.devId,
                id: this.$route.query.id,
                user_type_code: this.$route.query.user_type_code,
                show: false,
                items: [{
                    name: "删除指纹钥匙",
                    opeType: '01', //16进制数
                    opeCmd: '8202',
                    show:this.$route.query.user_key_0,
                }, {
                    name: "删除密码钥匙",
                    opeType: '02', //16进制数
                    opeCmd: '8202',
                    show:this.$route.query.user_key_1,
                }, {
                    name: "删除IC卡钥匙",
                    opeType: '04', //16进制数
                    opeCmd: '8202',
                    show:this.$route.query.user_key_2,
                },{
                    name: "删除所有钥匙",
                    opeType: '07', //16进制数
                    opeCmd: '8202',
                    show:true
                }, {
                    name: "添加指纹钥匙",
                    opeType: '01',
                    opeCmd: '8201',
                    show:!this.$route.query.user_key_0,
                }, {
                    name: "添加密码钥匙",
                    opeType: '02',
                    opeCmd: '8201',
                    show:!this.$route.query.user_key_1,
                }, {
                    name: "添加IC卡钥匙",
                    opeType: '04',
                    opeCmd: '8201',
                    show:!this.$route.query.user_key_2,
                }],
            }
        },
        created () {

        },
        methods: {
            onGeneralClick : function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            sendCommand: function (item) {
                Dialog.confirm({
                    title: item.name,
                    message: '是否'+item.name,
                }).then(() => {

                    //1、显示绑定中
                    this.show = true;
                    let _this = this;

                    //2、定义发送指定命令的回调函数
                    TenonWebsocket.msgHandlerCallbackMap.set('CmdFromDev'+'cmdFromDev',function(data){
                        //toast1.clear()
                        _this.show = false;
                        Toast.success("操作成功");
                    })

                    //3、绑定网关时发送消息让网关处于等待状态
                    TenonWebsocket.sendData(JSON.stringify({
                        "Cmd":"CmdToDev",
                        "SubCmd":"cmdToDev",
                        "GatewayId": _this.gatewayId,
                        "DevId": _this.devId,
                        "Data": item.opeCmd == '8202' ? item.opeCmd + (Array(4).join(0) + Number.parseInt(_this.id).toString(16)).slice(-4) + item.opeType :
                            item.opeCmd + (Array(4).join(0) + Number.parseInt(_this.id).toString(16)).slice(-4) + _this.user_type_code + item.opeType
                    }))
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
</script>

<style scoped>
    .managerKeys > .van-popup{
        background-color: rgba(0,0,0,0);
    }
    .managerKeys > .buttonList > .flexItem {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .managerKeys > .buttonList > .flexItem > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

    .managerKeys > .buttonList > .flexItem > .button:active {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_grep.png) no-repeat;
        color: orange;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
